<template>
  <section id="sceneries" class="py-16 bg-neutral-100">
    <div class="container mx-auto px-4">
      <SectionTitle title="沿途风景" subtitle="不必远行，身边也有诗和远方" />

      <!-- 风景图片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="lg:col-span-2 overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/10/800/600" alt="山间云雾" class="w-full h-full object-cover img-zoom">
        </div>
        <div class="overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/15/400/600" alt="湖边倒影" class="w-full h-full object-cover img-zoom">
        </div>
        <div class="overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/28/400/400" alt="小巷光影" class="w-full h-full object-cover img-zoom">
        </div>
        <div class="md:col-span-2 overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/42/800/400" alt="田野小路" class="w-full h-full object-cover img-zoom">
        </div>
        <div class="lg:col-span-3 overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/65/1200/400" alt="城市日落" class="w-full h-full object-cover img-zoom">
        </div>
      </div>

      <div class="mt-10 text-center">
        <router-link to="/sceneries"
          class="inline-flex items-center gap-2 text-primary hover:text-primary/80 font-medium transition-colors">
          浏览更多风景 <i class="fa fa-long-arrow-right"></i>
        </router-link>
      </div>
    </div>
  </section>
</template>

<script setup>
import SectionTitle from '@/components/ui/SectionTitle.vue'
</script>